<template>
  <div>
    <!-- 第一栏标题 -->
    <div
      class="uk-section"
      style="padding: 0px; margin-top: 20px; margin-bottom: 20px"
    >
      <div
        class="uk-container uk-container-expand fadeInUp wow animate__fadeInUp"
      >
        <el-row>
          <el-col :span="12" :xs="24">
            <div class="grid-content uk-navbar-nav index_title">
              <h3 style="line-height: 1; margin-bottom: 0; font-weight: bold">
                Graphic Design
              </h3>
            </div></el-col
          >
          <el-col :span="12" :xs="24">
            <ul class="uk-navbar-nav subnavbar index_subtitle">
              <li v-for="category in categories" :key="category.id">
                <nuxt-link
                  :to="{
                    name: 'categories-slug',
                    params: { slug: category.slug },
                  }"
                  tag="a"
                >
                  {{ category.name }}
                </nuxt-link>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 第一栏图片展示 -->
    <div
      class="uk-section"
      style="padding: 0px; margin-top: 20px; margin-bottom: 20px"
    >
      <div
        class="uk-container uk-container-expand"
        style="display: flex; justify-content: space-around; flex-wrap: wrap"
      >
        <div
          v-for="art in articles"
          :key="art.id"
          style="padding: 5px; flex: 30%"
          class="index_imgitem fadeInUp wow animate__fadeInUp"
        >
          <nuxt-link
            :to="{
              name: 'articles-id',
              params: { id: art.id },
            }"
            tag="a"
          >
            <img
              style="border-radius: 10px"
              :src="getStrapiMedia(art.image.url)"
            />
            <!-- <img src="~assets/banner1.jpg" /> -->
            <h5 style="margin-top: 15px; margin-bottom: 10px; line-height: 1">
              {{ art.title }}
            </h5>
            <!--            <span style="font-size: small">{{ art.description }}</span>-->
          </nuxt-link>
        </div>
        <!-- <div style="width: 32%"><img src="~assets/banner1.jpg" />dsafadsf</div>
        <div style="width: 32%"><img src="~assets/banner1.jpg" />大法师的</div> -->
      </div>
    </div>
    <!--  -->
    <!-- 第二栏标题 -->
    <div
      class="uk-section"
      style="padding: 20px 0px; background-color: #f7f7f7"
    >
      <div
        class="uk-container uk-container-expand fadeInUp wow animate__fadeInUp"
      >
        <el-row>
          <el-col :span="12" :xs="24">
            <div class="grid-content uk-navbar-nav index_title">
              <h3 style="line-height: 1; margin-bottom: 0; font-weight: bold">
                Photo Graphic
              </h3>
            </div>
          </el-col>
          <el-col :span="12" :xs="24">
            <ul class="uk-navbar-nav subnavbar index_subtitle">
              <li
                v-for="category in categoryphotos.slice(0, 5)"
                :key="category.id"
              >
                <nuxt-link
                  :to="{
                    name: 'photoscategories-slug',
                    params: { slug: category.slug },
                  }"
                  tag="a"
                >
                  {{ category.name }}
                </nuxt-link>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 第二栏图片展示 -->
    <div
      class="uk-section"
      style="padding: 0 0 20px 0px; background-color: #f7f7f7"
    >
      <div
        class="uk-container uk-container-expand fadeInUp wow animate__fadeInUp"
        style="display: flex; justify-content: flex-start; flex-wrap: wrap"
      >
        <div
          v-for="photo in photos"
          :key="photo.id"
          style="padding: 5px; flex: 32%"
          class="index_imgitem fadeInUp wow animate__fadeInUp"
        >
          <nuxt-link
            :to="{
              name: 'photos-id',
              params: { id: photo.id },
            }"
            tag="a"
          >
            <img
              style="border-radius: 10px"
              :src="getStrapiMedia(photo.image.url)"
            />
            <!-- <img src="~assets/banner1.jpg" /> -->
            <h5 style="margin-top: 15px; margin-bottom: 10px; line-height: 1">
              {{ photo.title }}
            </h5>
            <!--            <span style="font-size: small">{{ photo.description }}</span>-->
          </nuxt-link>
        </div>
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script>
// import { getMetaTags } from "../utils/seo";
import { getStrapiMedia } from "../utils/medias";
import Bottom from "@/components/Bottom";
if (process.browser) {
  // 在这里根据环境引入wow.js
  var { WOW } = require("wowjs");
}
export default {
  name: "Case",
  components: { Bottom },
  async asyncData({ $strapi }) {
    let tempart = await $strapi.find("articles");
    tempart.sort((a, b) => {
      return b.id - a.id;
    });
    return {
      categories: await $strapi.find("categories"),
      articles: tempart,
      categoryphotos: await $strapi.find("categoryphotos"),
      photos: await $strapi.find("photos"),
      // allnews: await $strapi.find("Mynews"),
      // homepage: await $strapi.find("homepage"),
      // global: await $strapi.find("global"),
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (process.browser) {
        // 在页面mounted生命周期里面 根据环境实例化WOW
        new WOW({ animateClass: "animate__animated" }).init();
      }
    });
  },
  methods: {
    getStrapiMedia,
  },
};
</script>

<style scoped>
.news_content_div {
  padding: 5px;
  flex: 30%;
  text-align: center;
  min-height: 200px;
}
.index_subtitle {
  justify-content: flex-end;
}

.index_imgitem {
  
  flex: 30%;
  text-align: center;
  min-height: 200px;
  font-size: 30px;
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .index_title {
    justify-content: center;
  }
  .index_subtitle {
    margin-top: 10px;
    justify-content: center;
  }
  .bottom_content {
    flex: 100%;
    text-align: center;
    margin-top: 50px;
    color: rgb(146, 146, 146);
  }
  .index_imgitem {
    font-size: 18px;
  }
}

.subnavbar li a {
  min-height: 30px;
}
.index_imgitem a {
  color: #4e4e4e;
  text-decoration: none;
}

.el-carousel__item h3 {
  color: #ffffff;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
}
</style>
